<template>
  <div class="widget-editor-container">
    <!-- <ToolBar @save="handleSave" @cancel="handleCancel" /> -->
    <widget-edit
      @retreat="handleCancel"
      type="component"
      :dataSourceInfo="dataSourceInfo"
      :componentData="componentData"
      @setDataSourceInfo="setDataSourceInfo"
      :saveCallback="handleSave"
    />
  </div>
</template>

<script>
import WidgetEdit from "@/views/dashboard/EditVisualizationComponent/Widget"
import ToolBar from "./ToolBar"

export default {
  data () {
    return {

    }
  },
  props: {
    dataSourceInfo: {
      type: Object,
      default: null
    },
    componentData: {
      type: Object,
      default: null
    },
  },
  created () {
    // queryMaDetail({maId: 100})
  },
  components: {
    WidgetEdit,
    ToolBar
  },
  methods: {
    retreat () {

    },
    setDataSourceInfo (val) {
      console.log(val)
    },
    handleSave (data) {
      this.$emit("save", data)
    },
    handleCancel () {
      this.$emit("cancel")
    }

  }
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
